<script lang="ts" setup>
// import { $ } from '../lib/request';
import { reactive } from '@vue/runtime-core';
// let tableData = shallowRef([] as any[]);
// $.get('/mock.json').then((result) => {
//     console.log(result.data);
//     tableData.value = result.data;
// }).catch((err) => {
//     console.log('err', err);
// });

// const selectChangeEvent = ({ checked, records }: { checked: boolean, records: any[] }) => {
//     console.log(checked ? '勾选事件' : '取消事件', records)
// }
// const selectAllEvent = ({ checked, records }: { checked: boolean, records: any[] }) => {
//     console.log(checked ? '所有勾选事件' : '所有取消事件', records);
// }
import thisModule from "./Pages/stone-router.ts";
import headerVue from '../lib/lay/header.vue';
import { infoStore } from '../lib/store/info';
const info = infoStore();
const parentPath = "/stone/";
const allows = reactive({} as any)
const getChildrenPath = (item: any, index: number) => {
    // if (item.meta.verify && info.verify.indexOf(item.meta.verify) < 0 && item.children?.length) {
    //     return item.path
    // }


    const itemChildren = item.children;
    if (!item.meta?.verify || info.verify.indexOf(`${item.meta.verify}`) != -1) {

        if (itemChildren?.length) {
            console.log('ok:', index);
            for (let k = itemChildren.length, i = 0; i < k; i++) {
                const itemVerify = itemChildren[i].meta.verify
                if (!itemVerify || info.verify.indexOf(`${itemVerify}`) !== -1) {
                    allows[index] = true
                    return `${item.path}${itemChildren[i].path}`;
                }
            }
        } else {
            allows[index] = true
            return item.path
        }
    }
    console.log(info.verify.indexOf(item.meta?.verify), item.meta.verify);

    return item.path
}
</script>
<template lang="pug">
headerVue.pt-8.pb-16
div(class="container grid text-center grid-cols-1  md:grid-cols-4 sm:grid-cols-2 ")
    router-link.card(v-for="(item,index) in thisModule" :key="item.path" :to="parentPath + getChildrenPath(item, index)" :class="{ 'forbid': !allows[index] }" v-shared-element:[`route-${parentPath}${item.path}`])
        | {{ item.meta.title }}
// vxe-table(show-overflow highlight-hover-row ref="xTable1" height="600" stripe :data="tableData" :checkbox-config="{ highlight: true, range: true,checkField: 'checked', trigger: 'row' }" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent")
// vxe-column(type="checkbox" width="60" field="id")
// // vxe-column(type="seq" width="100")
// vxe-column(field="name" title="Name"  :filters="[{data: ''}]")
// template(#header)
// span(style="color: red;")
// | 自定义头部
// template(#filter="{ $panel, column }")
// input.my-filter(type="type" v-model="option.data" v-for="(option, index) in column.filters" :key="index" @input="changeFilterEvent($event, option, $panel)")
// vxe-column(field="role" title="Role")
// vxe-column(field="sex" title="Sex")
</template>
<style lang="scss" scoped>
@import "../tailwind.scss";
.card {
    @apply bg-white shadow-md py-4 border-2 rounded-xl m-6 cursor-pointer text-center;
}
.forbid {
    @apply bg-gray-100 border-0 shadow-none cursor-not-allowed;
}
</style>